<!--
 * @Author: your name
 * @Date: 2022-02-21 15:03:56
 * @LastEditTime: 2022-02-22 10:21:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \demo\src\views\calendar-dialog\myDialog.vue
-->
<template>
  <div class="myDialog" v-if="dialogVisible">
    <el-dialog title="供能数据日历" :visible.sync="dialogVisible" width="80%">
      <div class="headerBox">
        <div class="item">
          <span>供能企业名称：</span>
          <span>{{ currentData.qymc }}</span>
        </div>
        <div class="item">
          <span>联系电话：</span>
          <span>{{ currentData.telephone }}</span>
        </div>
        <div class="item">
          <span>联系手机：</span>
          <span>{{ currentData.phone }}</span>
        </div>
      </div>
      <div class="yearBox">
        <div class="item" v-for="i in 12" :key="i">
          <div class="header">
            <span class="blockItem">{{
              i % 3 === 1 ? `第${(i + 2) / 3}季度` : ""
            }}</span>
            <span class="month">{{ i }}月</span>
          </div>
          <FullCalendar ref="full" :options="optionsList[i - 1]" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import { getData } from "./api.js";
export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data() {
    return {
      currentData: {
        qymc: "",
        telephone: "",
        phone: "",
      },
      dialogVisible: false,
      optionsList: [],
    };
  },
  created() {
    // 将今年第一天到今天设置未填报
    this.allData = this.getBeforeDay(
      new Date().getFullYear() + "-01-01",
      new Date()
    ).map((x) => {
      return {
        start: x,
        end: x,
        title: "未",
      };
    });

    this.allData.pop(); // 去掉今天 可以问一下 今天的数据会不会有 有就注释掉

    // 给12个日历对象全部设置未填报状态
    for (let i = 1; i < 13; i++) {
      this.optionsList.push({
        headerToolbar: false,
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        locale: "zh-cn",
        weekends: true, // initial value
        events: this.allData,
      });
    }
  },
  methods: {
    //   打开弹窗 接收数据
    async openDialog(data) {
      // 设置参数 data里存放的是点击表格的那条数据
      const params = {};
      const res = await getData(params);
      if (res.success) {
        // 将返回的日期与日历的events事件改成已填报  看字段修改
        res.data.forEach((x) => {
          this.allData.forEach((time) => {
            if (time.start === x.energyDate) {
              time.title = "已填报";
            }
          });
        });
      }
      // 拿到当前公司的数据 用于展示顶部 公司名 电话 手机
      this.currentData = { ...data };
      // 弹窗数据准备完毕 打开弹窗
      this.dialogVisible = true;
      this.$nextTick(() => {
        // 初始化了12个日历插件 设置每个日历的初始时间分别为当年的1月到12月
        this.$refs.full.forEach((x, index) => {
          const year = new Date().getFullYear();
          x.getApi().gotoDate(
            `${year}-${index + 1 < 10 ? "0" + (index + 1) : index + 1}`
          );
        });
      });
    },

    // findMonth(date) {
    //   if (!date) return;
    //   return new Date(date).getMonth();
    // },
    // 获取今年 今天之前的日期
    getBeforeDay(startDate, endDate) {
      let dates = [];
      const theDate = new Date(startDate);
      while (theDate < new Date(endDate)) {
        dates = [...dates, new Date(theDate)];
        theDate.setDate(theDate.getDate() + 1);
      }
      return [...dates].map((x) => this.timeFormat(x));
    },
    // 时间格式化函数
    timeFormat(date, fmt = "yyyy-MM-dd") {
      let time = new Date(date);
      let o = {
        "M+": time.getMonth() + 1, //月份
        "d+": time.getDate(), //日
        "h+": time.getHours(), //小时
        "m+": time.getMinutes(), //分
        "s+": time.getSeconds(), //秒
        "q+": Math.floor((time.getMonth() + 3) / 3), //季度
        S: time.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (time.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (let k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
  },
};
</script>

<style scoped lang='less'>
/deep/.el-dialog {
  margin: 20px auto !important;
  .el-dialog__body {
    padding-top: 10px;
  }
}
.myDialog {
  .headerBox {
    display: flex;
    .item {
      text-align: center;
      flex: 1;
    }
  }
  .yearBox {
    .item {
      display: inline-block;
      width: 33%;
      overflow: hidden;
      font-size: 10px !important;
      padding-right: 10px;
      box-sizing: border-box;
      .header {
        padding-right: 2px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding-bottom: 8px;
        font-weight: 600;
      }
    }
  }
}
</style>
